import { MenuDataItem, getMenuData, getPageTitle } from '@ant-design/pro-layout';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { Link, useIntl, ConnectProps, connect } from 'umi';
// import * as DocumentTitle from 'react-document-title';
import DocumentTitle from 'react-document-title';
import React, { useEffect } from 'react';
import SelectLang from '@/components/SelectLang';
import GlobalFooter from '@/components/GlobalFooter';
import { ConnectState } from '@/models/connect';
import globalStore from '@/store/global';
import logo from '../assets/img/login_01.png';
import styles from './UserLayout.less';

export interface UserLayoutProps extends Partial<ConnectProps> {
  breadcrumbNameMap: {
    [path: string]: MenuDataItem;
  };
}

const UserLayout: React.FC<UserLayoutProps> = (props) => {
  const {
    dispatch,
  } = props;

  useEffect(() => {
    if (dispatch) {
      globalStore.dispatch('getSite');
    }
  }, []);

  // const { routes = [] } = route;
  const {
    children,
  } = props;
  // const { formatMessage } = useIntl();
  // const { breadcrumb } = getMenuData(routes);
  // const title = getPageTitle({
  //   pathname: location.pathname,
  //   formatMessage,
  //   breadcrumb,
  //   ...props,
  // });
  const siteConfig: any = globalStore.useState('siteConfig');

  return (
    <DocumentTitle title={siteConfig.siteName}>
      <div className={styles.container}>
        <div className={styles.lang}>
          <SelectLang />
        </div>
        <div className={styles.content}>
          <div className={styles.top}>
            <div className={styles.header}>
              <Link to="/">
                <img alt="logo" className={styles.logo} src={logo} />
                {/* <span className={styles.title}>{siteConfig.siteName}</span> */}
              </Link>
            </div>
            <div className={styles.desc}>{siteConfig.loginTitle}</div>
          </div>
          {children}
        </div>
        <GlobalFooter copyright={siteConfig.contentFooter} />
      </div>
    </DocumentTitle>
  );
};

export default connect(({ settings }: ConnectState) => ({ ...settings }))(UserLayout);
